<template>
    <div class="self-bg">
        <div class="top">
            <div class="tt">
                <router-link to="/setting">
                    <img src="../../assets/img/setting.png" alt="">
                </router-link>
            </div>
            <div class="user-msg flex">
                <div class="pic">
                    <img :src="userinfo.avatar" alt="" :onerror="errorImg">
                </div>
                <p>{{userinfo.username}}</p>
            </div>
            <div class="tb flex-between">
                <router-link tag="div" to="/heart" class="tb-left flex">
                    <img src="../../assets/img/self-huangguan.png" alt="">
                    <div>
                        <span v-if="userinfo.level == 1">一级</span
                        ><span v-if="userinfo.level == 2">二级</span
                        ><span v-if="userinfo.level == 3">三级</span
                        ><span v-if="userinfo.level == 4">四级</span
                        ><span v-if="userinfo.level == 5">五级</span>爱心大使</div>
                </router-link>
                <div class="tb-right" @click="publish">
                    立即发起众筹
                </div>
            </div>
        </div>
        <ul class="middle-card flex-between">
            <router-link tag="li" to="/score" class="flex-center">
                <img src="../../assets/img/score-icon.png" alt="">
                <p>我的积分</p>
            </router-link>
            <router-link tag="li" to="/publish" class="flex-center">
                <img src="../../assets/img/publish-icon.png" alt="">
                <p>我的发布</p>
            </router-link>
            <router-link tag="li" to="/give" class="flex-center">
                <img src="../../assets/img/jianxian-icon.png" alt="">
                <p>我的捐献</p>
            </router-link>
        </ul>
        <ul class="bottom-card">
            <router-link tag="li" to="/treams" class="flex-between">
                <div class="flex">
                    <img src="../../assets/img/self-img1.png" alt="">
                    <p>我的团队</p>
                </div>
                <i class="iconfont iconyoujiantou"></i>
            </router-link>
            <router-link tag="li" to="/invite" class="flex-between">
                <div class="flex"><img src="../../assets/img/self-img2.png" alt="">
                    <p>邀请好友</p></div>
                <i class="iconfont iconyoujiantou"></i>
            </router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return {
                userinfo:{},
                errorImg:'this.src="'+ require('../../assets/img/self-pic.png')+ '"',
            }
        },
        mounted() {
            this.getUser()
        },
        methods:{
            publish(){
                if(!this.userinfo.level){
                    this.$vux.confirm.show({
                        title:"提示",
                        content:"请先开通会员",
                        // 组件除show外的属性
                        onCancel () {

                        },
                        onConfirm: ()=> {
                            this.$router.push({
                                path:"/heart"
                            })
                        }
                    })
                }else{
                    this.$router.push({
                        path:"/publish1"
                    })
                }
            },
            getUser(){
                this.$http.post('user/getUserInfo',{}).then(res=>{
                    console.log(res)
                    this.userinfo = res.data;
                    this.$store.dispatch('changeUser',res.data)
                })
            },
        }
    }
</script>

<style scoped lang="less">
    .self-bg{
        .top{
            height: 421px;
            background: url("../../assets/img/self-bg.png") no-repeat 100% 100%;
            background-size: 100% 100%;
            position: relative;
            .tt{
                text-align: right;
                padding: 40px 30px 0 0;
                img{
                    width: 45px;
                }
            }
            .user-msg{
                padding: 40px 30px;
                .pic{
                    width: 120px;
                    height:120px;
                    border-radius: 50%;
                    margin-right: 30px;
                    background: white;
                    overflow: hidden;
                    border: 2px solid #eee;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                p{
                    font-size: 40px;
                    color: #ffffff;
                }
            }
            .tb{
                position:absolute;
                bottom:0;
                left:30px;
                height: 94px;
                width: 690px;
                box-sizing: border-box;
                padding: 0 30px;
                color:#ede0b3;
                img{
                    width: 40px;
                    margin-right: 15px;
                }
                .tb-left div{
                    font-size: 32px;
                }
                .tb-right{
                    border:2px solid #ede0b3;
                    font-size: 20px;
                    padding: 2px 20px;
                    border-radius: 20px;
                }
            }
        }
        .middle-card{
            width: 690px;
            background-color: #ffffff;
            border-radius: 20px;
            margin: 30px auto;
            box-sizing: border-box;
            padding: 0 80px;
            .flex-center{
                flex-direction: column;
                padding: 30px 0;
                img{
                    width: 100px;
                    margin-bottom: 8px;
                }
            }
        }
        .bottom-card{
            width: 690px;
            background-color: #ffffff;
            border-radius: 20px;
            margin: 30px auto;
            box-sizing: border-box;
            padding:20px 30px;
            li{
                padding: 30px 0;
                img{
                    width: 50px;
                    margin-right: 20px;
                }
                p{
                    font-size: 28px;
                }
            }

        }
    }
</style>
